<template>
    <div class="screen">
        <div class="box" ref="box">
            <Header></Header>
            <div class="box_content">
                <div class="box_content_left">
                    <Yktj></Yktj>
                    <Sex></Sex>
                    <Age></Age>
                </div>
                <div class="box_content_main">
                    <Map></Map>
                </div>
                <div class="box_content_right">

                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Header from './components/header/index.vue'
import Yktj from './components/yktj/index.vue'
import Age from './components/age/index.vue'
import Sex from './components/sex/index.vue'
import Map from './components/map/index.vue'

import { onMounted, ref } from 'vue'
// 盒子实例
const box = ref()
onMounted(() => {
    setTransform()
})
const setTransform = () => {
    box.value.style.transform = `scale(${setScreen()}) translate(-50%, -50%)`

}
// box这个盒子要设置基点 要fixed 的定位
const setScreen = (w: number = 1920, h: number = 1080) => {
    const ww = window.innerWidth / w
    const hh = window.innerHeight / h
    return ww < hh ? ww : hh
}
window.onresize = () => {
    setTransform()

}


</script>
<script lang="ts">
export default {
    name: 'Screen'
}
</script>
<style scoped lang="scss">
@import url('./index.scss');
</style>
